<template>
  <view class="homepage">
    <MainHeader />
    <view class="homepage-content">
      <view class="nav-main">
        <view class="nav-block">
          <view
            class="nav-item"
            @click="goTo('/pages/classification/homepage/punch-card/index')"
          >
            <img src="@/static/punch-card.svg" alt="" />
            <text>打卡</text>
          </view>
          <view
            class="nav-item"
            @click="goTo('/pages/classification/approval/leave/index')"
          >
            <img src="@/static/vacation.svg" alt="" />
            <text>请假</text>
          </view>
          <view
            class="nav-item"
            @click="goTo('/pages/classification/homepage/apply-for/index')"
          >
            <img src="@/static/apply-for.svg" alt="" />
            <text>申请</text>
          </view>
        </view>
        <view class="weather-report">
          <view class="main-weather">
            <view class="city">
              {{ weather.city }}
              <img src="@/static/weather-logo/navigation.svg" alt="" />
            </view>
            <view class="temperature">
              {{ weather.temperature }} <span>℃</span>
            </view>
          </view>
          <view class="weather-desc">
            <view class="weather">
              <img :src="weatherPics" />
              <view class="weather-name">
                {{ weather.weather }}
              </view>
            </view>
            <view class="tiny-desc">
              <view class="wind-direction">
                <img src="@/static/weather-logo/wind.png" alt="" />
                {{ weather.winddirection }}风 {{ weather.windpower }}级
              </view>
              <view class="humidity">
                <img src="@/static/weather-logo/humidity.png" alt="" />
                相对湿度 {{ weather.humidity }}%
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="notification">
        <view
          class="notification-item"
          v-for="item in notificationList"
          :key="item.id"
          @click="displayNotification(item)"
        >
          <view class="notice-logo">
            <img :src="selectLogo(item.level)" alt="" />
          </view>
          <view class="notice-title">
            {{ item.title }}
          </view>
          <view class="notice-desc">
            {{ item.content }}
          </view>
          <view class="notice-time">
            {{ item.createTime }}
          </view>
        </view>
        <view class="notification-tips" v-if="notificationList === ''">
          暂时没有公告
        </view>
      </view>
    </view>
  </view>
</template>
<script src="./script.js"></script>
<style lang="less" src="./style.less"></style>
